<template>
  <div class="ansible-audit-container">
    <!-- 星空背景 -->
    <div class="starry-background">
      <div class="stars"></div>
      <div class="stars2"></div>
      <div class="stars3"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="audit-content">
      <!-- 页面标题 -->
      <div class="page-header glass-effect">
        <div class="header-content">
          <div class="title-section">
            <h1 class="page-title">
              <i class="fa fa-cogs"></i>
              Jenkins构建历史
            </h1>
            <p class="page-subtitle">查看和管理Jenkins构建记录</p>
          </div>
          <div class="stats-section">
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ total }}</div>
              <div class="stat-label">构建总数</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ (builds || []).filter(b => b.status === 'SUCCESS').length }}</div>
              <div class="stat-label">成功构建</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ (builds || []).filter(b => b.status === 'FAILURE').length }}</div>
              <div class="stat-label">失败构建</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 工具栏：操作按钮 + 搜索过滤 -->
      <div class="search-filters glass-effect">
        <div class="toolbar-left">
          <el-button type="primary" @click="refreshBuilds" class="glass-button refresh-button" :loading="loading">
            <i class="fa fa-refresh"></i>
            刷新构建
          </el-button>
          <el-button @click="syncBuilds" class="glass-button sync-button" :loading="syncing">
            <i class="fa fa-sync"></i>
            同步构建
          </el-button>
        </div>

        <div class="search-section">
          <div class="search-row">
            <div class="search-group">
              <label class="search-label">项目</label>
              <el-select
                v-model="selectedProject"
                placeholder="选择项目"
                clearable
                @change="onProjectChange"
                class="glass-select"
              >
                <el-option label="全部项目" value="" />
                <el-option
                  v-for="project in projects"
                  :key="project.id"
                  :label="project.name"
                  :value="project.id"
                />
              </el-select>
            </div>

            <div class="search-group">
              <label class="search-label">环境</label>
              <el-select
                v-model="selectedEnvironment"
                placeholder="选择环境"
                clearable
                @change="onEnvironmentChange"
                class="glass-select"
              >
                <el-option label="全部环境" value="" />
                <el-option
                  v-for="env in environments"
                  :key="env.id"
                  :label="env.name"
                  :value="env.id"
                />
              </el-select>
            </div>

            <div class="search-group">
              <label class="search-label">任务</label>
              <el-select
                v-model="selectedJob"
                placeholder="选择任务"
                clearable
                @change="onJobChange"
                class="glass-select"
              >
                <el-option label="全部任务" value="" />
                <el-option
                  v-for="job in jobs"
                  :key="job.id"
                  :label="job.name"
                  :value="job.id"
                />
              </el-select>
            </div>

            <div class="search-group">
              <label class="search-label">状态</label>
              <el-select
                v-model="selectedStatus"
                placeholder="构建状态"
                clearable
                @change="onStatusChange"
                class="glass-select"
              >
                <el-option label="全部状态" value="" />
                <el-option label="成功" value="SUCCESS" />
                <el-option label="失败" value="FAILURE" />
                <el-option label="不稳定" value="UNSTABLE" />
                <el-option label="已中止" value="ABORTED" />
                <el-option label="构建中" value="BUILDING" />
              </el-select>
            </div>

            <div class="search-group">
              <label class="search-label">搜索</label>
              <el-input
                v-model="searchText"
                placeholder="搜索任务名称..."
                clearable
                @input="onSearch"
                class="glass-input"
              >
                <template #prefix>
                  <i class="fa fa-search"></i>
                </template>
              </el-input>
            </div>
          </div>

          <div class="search-row">
            <div class="search-group">
              <label class="search-label">开始日期</label>
              <el-date-picker
                v-model="dateRange.start"
                type="date"
                placeholder="开始日期"
                @change="onDateRangeChange"
                class="glass-date-picker"
              />
            </div>
            <div class="search-group">
              <label class="search-label">结束日期</label>
              <el-date-picker
                v-model="dateRange.end"
                type="date"
                placeholder="结束日期"
                @change="onDateRangeChange"
                class="glass-date-picker"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 构建记录表格 -->
      <div class="table-container glass-effect">
        <div class="table-header">
          <h3 class="table-title">
            <i class="fa fa-list"></i>
            构建记录
          </h3>
          <div class="table-actions">
            <span class="record-count">共 {{ total }} 条记录</span>
          </div>
        </div>

        <div class="table-content">
          <el-table
            :data="builds"
            v-loading="loading"
            class="glass-table"
            :row-class-name="getRowClassName"
            empty-text="暂无构建记录"
          >
            <el-table-column prop="build_number" label="构建编号" width="100" align="center">
              <template #default="{ row }">
                <span class="build-number">#{{ row.build_number }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="job_name" label="任务名称" min-width="140">
              <template #default="{ row }">
                <div class="job-info">
                  <div class="job-name">{{ row.job_name }}</div>
                  <div class="job-project">{{ row.project_name }}</div>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="status" label="状态" width="110" align="center">
              <template #default="{ row }">
                <span class="status-badge" :class="'status-' + row.status.toLowerCase()">
                  <i class="fa" :class="getStatusIcon(row.status)"></i>
                  {{ getStatusText(row.status) }}
                </span>
              </template>
            </el-table-column>

            <el-table-column prop="duration" label="持续时间" width="100" align="center">
              <template #default="{ row }">
                <span class="duration">{{ row.duration ? formatDuration(row.duration) : '计算中' }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="start_time" label="开始时间" width="160" />

            <el-table-column prop="triggered_by" label="触发用户" width="100" />

            <el-table-column label="操作" width="270" :show-overflow-tooltip="false" align="center">
              <template #default="{ row }">
                <div class="action-buttons">
                  <el-button
                    type="primary"
                    size="small"
                    @click="viewBuildDetail(row)"
                    class="glass-button action-btn detail-btn"
                  >
                    <i class="fa fa-eye"></i>
                    详情
                  </el-button>
                  <el-button
                    v-if="row.jenkins_build_url"
                    type="info"
                    size="small"
                    @click="openJenkins(row)"
                    class="glass-button action-btn"
                  >
                    <i class="fa fa-external-link"></i>
                    Jenkins
                  </el-button>
                  <el-button
                    v-if="row.status === 'BUILDING'"
                    type="danger"
                    size="small"
                    @click="abortBuild(row)"
                    class="glass-button action-btn"
                  >
                    <i class="fa fa-stop"></i>
                    中止
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-container" v-if="total > 0">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="onPageSizeChange"
            @current-change="onPageChange"
            class="glass-pagination"
          />
        </div>
      </div>
    </div>

    <!-- 构建详情弹窗 -->
    <el-dialog
      v-model="showDetailModal"
      :title="`构建详情 - ${selectedBuild?.job_name} #${selectedBuild?.build_number}`"
      width="90%"
      :close-on-click-modal="false"
      class="glass-dialog"
    >
      <div class="build-detail-content">
        <el-tabs v-model="activeTab" type="border-card" class="glass-tabs">
          <!-- 基本信息 -->
          <el-tab-pane label="基本信息" name="info">
            <div class="info-section glass-effect">
              <div class="info-grid">
                <div class="info-item">
                  <label>构建状态</label>
                  <span class="status-badge" :class="'status-' + selectedBuild?.status?.toLowerCase()">
                    <i class="fa" :class="getStatusIcon(selectedBuild?.status)"></i>
                    {{ getStatusText(selectedBuild?.status) }}
                  </span>
                </div>
                <div class="info-item">
                  <label>构建编号</label>
                  <span>#{{ selectedBuild?.build_number }}</span>
                </div>
                <div class="info-item">
                  <label>任务名称</label>
                  <span>{{ selectedBuild?.job_name }}</span>
                </div>
                <div class="info-item">
                  <label>项目</label>
                  <span>{{ selectedBuild?.project_name || '未知项目' }}</span>
                </div>
                <div class="info-item">
                  <label>环境</label>
                  <span>{{ selectedBuild?.environment_name || '未知环境' }}</span>
                </div>
                <div class="info-item">
                  <label>开始时间</label>
                  <span>{{ selectedBuild?.start_time }}</span>
                </div>
                <div class="info-item">
                  <label>结束时间</label>
                  <span>{{ selectedBuild?.end_time || '进行中' }}</span>
                </div>
                <div class="info-item">
                  <label>持续时间</label>
                  <span>{{ selectedBuild?.duration ? formatDuration(selectedBuild.duration) : '计算中' }}</span>
                </div>
                <div class="info-item">
                  <label>触发用户</label>
                  <span>{{ selectedBuild?.triggered_by || '系统' }}</span>
                </div>
                <div class="info-item">
                  <label>触发原因</label>
                  <span>{{ selectedBuild?.trigger_cause || '手动触发' }}</span>
                </div>
                <div class="info-item full-width">
                  <label>Jenkins URL</label>
                  <a
                    v-if="selectedBuild?.jenkins_build_url"
                    :href="selectedBuild.jenkins_build_url"
                    target="_blank"
                    class="jenkins-link"
                  >
                    <i class="fa fa-external-link"></i>
                    在Jenkins中查看
                  </a>
                  <span v-else>不可用</span>
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 构建日志 -->
          <el-tab-pane label="构建日志" name="console">
            <div class="console-section glass-effect" v-loading="consoleLoading">
              <div class="console-header">
                <h4><i class="fa fa-terminal"></i> 构建控制台输出</h4>
              </div>
              <div class="console-content">
                <pre v-if="consoleOutput" class="console-output">{{ consoleOutput }}</pre>
                <div v-else-if="!consoleLoading" class="no-console">
                  <i class="fa fa-exclamation-triangle"></i>
                  无法获取构建日志
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 构建参数 -->
          <el-tab-pane label="构建参数" name="params" v-if="selectedBuild?.build_parameters">
            <div class="params-section glass-effect">
              <div class="params-grid">
                <div
                  v-for="(value, key) in selectedBuild.build_parameters"
                  :key="key"
                  class="param-item"
                >
                  <label>{{ key }}</label>
                  <span>{{ value }}</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { environmentApi, jenkinsApi, jenkinsJobApi, jenkinsServerApi, projectApi } from '@/api/jenkins'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'

// 响应式数据
const builds = ref<any[]>([])
const projects = ref<any[]>([])
const environments = ref<any[]>([])
const jobs = ref<any[]>([])
const jenkinsServers = ref<any[]>([])

// 过滤器状态
const selectedProject = ref('')
const selectedEnvironment = ref('')
const selectedServer = ref('')
const selectedJob = ref('')
const selectedStatus = ref('')
const searchText = ref('')
const dateRange = ref({
  start: '',
  end: ''
})

// 分页状态
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

// 加载状态
const loading = ref(false)
const syncing = ref(false)
const consoleLoading = ref(false)

// 详情弹窗
const showDetailModal = ref(false)
const selectedBuild = ref(null)
const activeTab = ref('info')
const consoleOutput = ref('')

// 方法
const loadBuilds = async () => {
  loading.value = true
  try {
    const params: any = {
      page: currentPage.value,
      page_size: pageSize.value
    }

    if (selectedProject.value) params.project_id = selectedProject.value
    if (selectedEnvironment.value) params.environment_id = selectedEnvironment.value
    if (selectedJob.value) params.job_id = selectedJob.value
    if (selectedStatus.value) params.status = selectedStatus.value
    if (dateRange.value.start) params.start_date = dateRange.value.start
    if (dateRange.value.end) params.end_date = dateRange.value.end
    if (searchText.value) params.search = searchText.value

    const response = await jenkinsApi.getBuilds(params)
    builds.value = response.data.results || []
    total.value = response.data.count || 0
  } catch (error) {
    console.error('加载构建记录失败:', error)
    ElMessage.error('加载构建记录失败')
  } finally {
    loading.value = false
  }
}

const loadProjects = async () => {
  try {
    const response = await projectApi.getProjects()
    projects.value = response.data.results || response.data
  } catch (error) {
    console.error('加载项目列表失败:', error)
  }
}

const loadEnvironments = async () => {
  try {
    const response = await environmentApi.getEnvironments()
    environments.value = response.data.results || response.data
  } catch (error) {
    console.error('加载环境列表失败:', error)
  }
}

const loadJobs = async () => {
  try {
    const params: any = {}
    if (selectedProject.value) params.project_id = selectedProject.value
    if (selectedEnvironment.value) params.environment_id = selectedEnvironment.value

    const response = await jenkinsJobApi.getJobs(params)
    jobs.value = response.data.results || response.data
  } catch (error) {
    console.error('加载任务列表失败:', error)
  }
}

const loadJenkinsServers = async () => {
  try {
    const response = await jenkinsServerApi.getServers()
    jenkinsServers.value = response.data.results || response.data
  } catch (error) {
    console.error('加载Jenkins服务器列表失败:', error)
  }
}

// 事件处理
const onProjectChange = () => {
  currentPage.value = 1
  loadJobs()
  loadBuilds()
}

const onEnvironmentChange = () => {
  currentPage.value = 1
  loadJobs()
  loadBuilds()
}

const onServerChange = () => {
  currentPage.value = 1
  loadBuilds()
}

const onJobChange = () => {
  currentPage.value = 1
  loadBuilds()
}

const onStatusChange = () => {
  currentPage.value = 1
  loadBuilds()
}

const onDateRangeChange = () => {
  currentPage.value = 1
  loadBuilds()
}

const onSearch = () => {
  currentPage.value = 1
  loadBuilds()
}

const onPageChange = (page: number) => {
  currentPage.value = page
  loadBuilds()
}

const onPageSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
  loadBuilds()
}

const refreshBuilds = async () => {
  await loadBuilds()
  ElMessage.success('构建记录已刷新')
}

const syncBuilds = async () => {
  try {
    await ElMessageBox.confirm(
      '同步构建记录将从Jenkins服务器获取最新的构建数据，这可能需要一些时间。是否继续？',
      '确认同步',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    syncing.value = true

    // 先获取所有Jenkins任务
    const jobsResponse = await jenkinsJobApi.getJobs()
    const allJobs = jobsResponse.data.results || jobsResponse.data

    // 为每个任务同步构建记录
    for (const job of allJobs) {
      try {
        await jenkinsApi.syncBuilds(job.id)
        console.log(`已同步任务 ${job.name} 的构建记录`)
      } catch (error) {
        console.error(`同步任务 ${job.name} 失败:`, error)
      }
    }

    ElMessage.success('构建记录同步完成')
    await loadBuilds()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('同步构建记录失败:', error)
      ElMessage.error('同步构建记录失败')
    }
  } finally {
    syncing.value = false
  }
}

// 查看构建详情
const viewBuildDetail = async (build: any) => {
  selectedBuild.value = build
  showDetailModal.value = true
  activeTab.value = 'info'

  // 自动加载构建日志
  await loadConsoleOutput(build)
}

// 加载构建日志
const loadConsoleOutput = async (build: any) => {
  consoleLoading.value = true
  consoleOutput.value = ''

  try {
    // 使用构建记录的console接口
    const response = await jenkinsApi.getBuildConsoleById(build.id)

    if (response.data.success) {
      consoleOutput.value = response.data.console_output
    } else {
      consoleOutput.value = '无法获取构建日志: ' + (response.data.message || '未知错误')
    }
  } catch (error) {
    console.error('获取构建日志失败:', error)
    consoleOutput.value = '获取构建日志失败: ' + error.message
  } finally {
    consoleLoading.value = false
  }
}

// 打开Jenkins页面
const openJenkins = (build: any) => {
  if (build.jenkins_build_url) {
    window.open(build.jenkins_build_url, '_blank')
  } else {
    ElMessage.warning('Jenkins构建URL不可用')
  }
}

// 中止构建
const abortBuild = async (build: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要中止构建 #${build.build_number} 吗？`,
      '确认中止',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    await jenkinsApi.stopBuild(build.job_id || build.id, build.build_number)
    ElMessage.success('构建已中止')
    await loadBuilds()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('中止构建失败:', error)
      ElMessage.error('中止构建失败')
    }
  }
}

// 工具函数
const getStatusType = (status: string) => {
  switch (status?.toUpperCase()) {
    case 'SUCCESS':
      return 'success'
    case 'FAILURE':
      return 'danger'
    case 'UNSTABLE':
      return 'warning'
    case 'ABORTED':
      return 'info'
    case 'BUILDING':
      return 'primary'
    default:
      return 'info'
  }
}

const getStatusIcon = (status: string) => {
  switch (status?.toUpperCase()) {
    case 'SUCCESS':
      return 'fa-check-circle'
    case 'FAILURE':
      return 'fa-times-circle'
    case 'UNSTABLE':
      return 'fa-exclamation-triangle'
    case 'ABORTED':
      return 'fa-stop-circle'
    case 'BUILDING':
      return 'fa-spinner fa-spin'
    default:
      return 'fa-question-circle'
  }
}

const getStatusText = (status: string) => {
  switch (status?.toUpperCase()) {
    case 'SUCCESS':
      return '成功'
    case 'FAILURE':
      return '失败'
    case 'UNSTABLE':
      return '不稳定'
    case 'ABORTED':
      return '已中止'
    case 'BUILDING':
      return '构建中'
    default:
      return '未知'
  }
}

const getRowClassName = ({ row }: { row: any }) => {
  switch (row.status?.toUpperCase()) {
    case 'SUCCESS':
      return 'success-row'
    case 'FAILURE':
      return 'danger-row'
    case 'UNSTABLE':
      return 'warning-row'
    case 'BUILDING':
      return 'building-row'
    default:
      return ''
  }
}

const formatDuration = (duration: number) => {
  if (!duration) return '0s'

  // duration是毫秒，需要转换为秒
  const totalSeconds = Math.floor(duration / 1000)
  const hours = Math.floor(totalSeconds / 3600)
  const minutes = Math.floor((totalSeconds % 3600) / 60)
  const seconds = totalSeconds % 60

  if (hours > 0) {
    return `${hours}h ${minutes}m ${seconds}s`
  } else if (minutes > 0) {
    return `${minutes}m ${seconds}s`
  } else {
    return `${seconds}s`
  }
}

// 生命周期
onMounted(() => {
  loadBuilds()
  loadProjects()
  loadEnvironments()
  loadJobs()
  loadJenkinsServers()
})
</script>

<style scoped>
/* 使用与Jenkins管理页面完全相同的样式 */
.ansible-audit-container {
  min-height: 100vh;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(20, 20, 40, 0.95) 50%,
    rgba(0, 0, 0, 0.9) 100%
  );
  overflow-x: hidden;
}

.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent);
  background-repeat: repeat;
  background-size: 550px 550px, 350px 350px, 250px 250px;
  animation: sparkle 20s linear infinite;
  z-index: 0;
  pointer-events: none;
}

.stars, .stars2, .stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.stars {
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent);
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: sparkle 20s linear infinite;
}

.stars2 {
  background-image:
    radial-gradient(1px 1px at 30px 40px, #fff, transparent),
    radial-gradient(1px 1px at 60px 80px, rgba(255,255,255,0.6), transparent);
  background-repeat: repeat;
  background-size: 300px 300px;
  animation: sparkle 30s linear infinite reverse;
}

.stars3 {
  background-image:
    radial-gradient(1px 1px at 90px 40px, #fff, transparent),
    radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.4), transparent);
  background-repeat: repeat;
  background-size: 400px 400px;
  animation: sparkle 40s linear infinite;
}

@keyframes sparkle {
  from { transform: translateY(0px); }
  to { transform: translateY(-100px); }
}

.audit-content {
  position: relative;
  z-index: 1;
  padding: 20px;
  min-height: 100vh;
}

.glass-effect {
  background: rgba(164, 244, 186, 0.1);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.page-header {
  margin-bottom: 24px;
  padding: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.title-section {
  flex: 1;
  min-width: 300px;
}

.page-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #a4f4ba;
  margin: 0 0 8px 0;
  text-shadow: 0 0 20px rgba(164, 244, 186, 0.5);
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-title i {
  font-size: 2rem;
}

.page-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.stats-section {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.stat-card {
  padding: 16px 20px;
  text-align: center;
  min-width: 120px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #a4f4ba;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.search-filters {
  margin-bottom: 24px;
  padding: 20px;
}

.toolbar-left {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.search-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: end;
}

.search-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
  flex: 1;
}

.search-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.table-container {
  padding: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(164, 244, 186, 0.2);
}

.table-title {
  font-size: 1.3rem;
  color: #a4f4ba;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.record-count {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.table-content {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  padding-top: 16px;
  border-top: 1px solid rgba(164, 244, 186, 0.2);
}

/* 按钮样式 */
.glass-button {
  background: rgba(164, 244, 186, 0.15) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: #a4f4ba !important;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.glass-button:hover {
  background: rgba(164, 244, 186, 0.25) !important;
  border-color: rgba(164, 244, 186, 0.5) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(164, 244, 186, 0.2);
}

.glass-button i {
  margin-right: 6px;
}

.action-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.action-btn {
  padding: 4px 8px !important;
  font-size: 0.85rem !important;
  min-width: 60px !important;
}

.detail-btn {
  min-width: 70px !important;
  padding: 4px 12px !important;
}

/* 表格样式 */
.build-number {
  font-weight: 600;
  color: #a4f4ba;
}

.job-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.job-name {
  font-weight: 500;
  color: #ffffff;
}

.job-project {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
}

.status-success {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.status-failure {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
  border: 1px solid rgba(244, 67, 54, 0.3);
}

.status-unstable {
  background: rgba(255, 152, 0, 0.2);
  color: #ff9800;
  border: 1px solid rgba(255, 152, 0, 0.3);
}

.status-aborted {
  background: rgba(158, 158, 158, 0.2);
  color: #9e9e9e;
  border: 1px solid rgba(158, 158, 158, 0.3);
}

.status-building {
  background: rgba(33, 150, 243, 0.2);
  color: #2196f3;
  border: 1px solid rgba(33, 150, 243, 0.3);
}

.duration {
  font-family: 'Courier New', monospace;
  color: #a4f4ba;
}

/* 弹窗样式 */
.build-detail-content {
  padding: 0;
}

.info-section, .console-section, .params-section {
  margin: 16px 0;
  padding: 20px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.info-item label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.info-item span {
  color: #ffffff;
  font-weight: 500;
}

.jenkins-link {
  color: #a4f4ba;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.jenkins-link:hover {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(164, 244, 186, 0.5);
}

.console-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(164, 244, 186, 0.2);
}

.console-header h4 {
  color: #a4f4ba;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.console-content {
  min-height: 400px;
}

.console-output {
  background: #1a1a2e;
  color: #a4f4ba;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(164, 244, 186, 0.3);
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 500px;
  overflow-y: auto;
  margin: 0;
}

.no-console {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  min-height: 200px;
}

.params-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.param-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: rgba(164, 244, 186, 0.05);
  border-radius: 6px;
  border: 1px solid rgba(164, 244, 186, 0.1);
}

.param-item label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.param-item span {
  color: #ffffff;
  font-weight: 500;
  word-break: break-all;
}

/* Element Plus 组件样式覆盖 */
:deep(.el-select) {
  width: 100%;
}

:deep(.el-select .el-input__wrapper) {
  background: rgba(164, 244, 186, 0.1) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  border-radius: 8px !important;
  color: white !important;
}

:deep(.el-select .el-input__inner) {
  color: white !important;
}

:deep(.el-input__wrapper) {
  background: rgba(164, 244, 186, 0.1) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  border-radius: 8px !important;
  color: white !important;
}

:deep(.el-input__inner) {
  color: white !important;
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}

:deep(.el-table) {
  background: transparent !important;
  color: white !important;
}

:deep(.el-table__header) {
  background: rgba(164, 244, 186, 0.1) !important;
}

:deep(.el-table th) {
  background: rgba(164, 244, 186, 0.1) !important;
  color: white !important;
  border-color: rgba(164, 244, 186, 0.2) !important;
}

:deep(.el-table td) {
  border-color: rgba(164, 244, 186, 0.1) !important;
  color: white !important;
}

:deep(.el-table__row) {
  background: rgba(26, 26, 46, 0.3) !important;
}

:deep(.el-table__row:hover) {
  background: rgba(164, 244, 186, 0.1) !important;
}

:deep(.el-pagination) {
  color: white !important;
}

:deep(.el-pagination button) {
  background: rgba(164, 244, 186, 0.1) !important;
  color: white !important;
  border-color: rgba(164, 244, 186, 0.3) !important;
}

:deep(.el-dialog) {
  background: rgba(26, 26, 46, 0.95) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  backdrop-filter: blur(10px);
}

:deep(.el-dialog__header) {
  background: rgba(164, 244, 186, 0.1) !important;
  color: white !important;
}

:deep(.el-dialog__title) {
  color: white !important;
}

:deep(.el-tabs__header) {
  background: rgba(164, 244, 186, 0.05) !important;
}

:deep(.el-tabs__item) {
  color: rgba(255, 255, 255, 0.7) !important;
}

:deep(.el-tabs__item.is-active) {
  color: #a4f4ba !important;
}

:deep(.el-tabs__content) {
  background: transparent !important;
}

:deep(.el-tab-pane) {
  background: transparent !important;
}

:deep(.el-loading-mask) {
  background: rgba(0, 0, 0, 0.8) !important;
}

:deep(.el-empty__description p) {
  color: rgba(255, 255, 255, 0.6) !important;
}
</style>
